<template>
  <div class="userCenter-layout">
    <el-row>
      <el-card class="box-card" style="width: 500px">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <div class="user-info">
          <div class="user-avatar">
            <!-- <UserAvatar :img="userInfo.avatar" /> -->
          </div>
          <div class="user-rules">
            <ul class="rules-container">
              <li class="rules-item">
                <span>
                  <el-icon><Icon icon="zuoxibianhao" /></el-icon>用户编号
                </span>
                <span class="rules-name">{{ userInfo.userCode }}</span>
              </li>
              <li class="rules-item">
                <span>
                  <el-icon><Icon icon="user-outlined" /></el-icon>用户名称
                </span>
                <span class="rules-name">{{ userInfo.userName }}</span>
              </li>
              <li class="rules-item">
                <span>
                  <el-icon><Icon icon="shoujihaoma" /></el-icon>手机号码
                </span>
                <span class="rules-name">{{ userInfo.phone }}</span>
              </li>
              <li class="rules-item">
                <span>
                  <el-icon><Icon icon="icon-mail" /></el-icon>用户邮箱
                </span>
                <span class="rules-name">{{ userInfo.email }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本资料</span>
          </div>
        </template>
        <div class="base-info">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本资料" name="baseInfo"><BasicProfileInfo /></el-tab-pane>
            <el-tab-pane label="修改密码" name="editPwd"><EditorPassword /></el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores";
import { computed, ref } from "vue";
import BasicProfileInfo from "./components/BasicProfileInfo.vue";
import EditorPassword from "./components/EditorPassword.vue";
// import UserAvatar from "@/components/UserAvatar/index.vue";
import type { User } from "@/typings";
defineOptions({
  name: "userCentre"
});
const useUser = useUserStore();
const userInfo = computed<User>(() => useUser.userInfo);
const activeName = ref("baseInfo");
</script>

<style scoped lang="scss">
.userCenter-layout {
  width: 100%;
  height: 100%;
  :deep(.el-row) {
    align-items: flex-start;
    .box-card {
      .user-info {
        .user-avatar {
          width: 100%;
          height: 140px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .user-rules {
          .rules-container {
            .rules-item {
              height: 40px;
              list-style: none;
              border-bottom: 1px solid #ccc;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .el-icon {
                vertical-align: middle;
                margin-right: 4px;
              }
              .rules-name {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .box-card:last-child {
      margin-left: 20px;
      flex: 1;
    }
  }
}
</style>
